<!-- 登录页 -->
<template>
  <div class="login_page">
    <DescText />
    <Form ref="formInline" :model="formInline" :rules="ruleInline">
      <Row type="flex" justify="center">
        <Col span="8">
          <FormItem prop="user" label="用户名" :label-width="80">
            <Input type="text" v-model="formInline.user" placeholder="用户名">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
        </Col>
      </Row>
      <Row type="flex" justify="center">
        <Col span="8">
          <FormItem prop="password" label="密码" :label-width="80">
            <Input type="password" v-model="formInline.password" placeholder="密码">
              <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
        </Col>
      </Row>
      <FormItem>
        <Button type="primary" @click="handleSubmit('formInline')">登录</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import md5 from "md5";
import DescText from '../../components/DescText';
import request from '../../utils/request';

export default {
  data() {
    return {
      formInline: {
        user: "",
        password: ""
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            triiger: "blur"
          },
          {
            type: "string",
            min: 6,
            message: "密码长度不得小于6位",
            trigger: "blur"
          }
        ]
      }
    };
  },
  components: { DescText },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          request({
            url: '/user/login',
            method: 'POST',
            data: {
              userName: this.formInline.user,
              password: md5(this.formInline.password)
            }
          }).then((result) => {
            const { code, message } = result;
            if (code === 200) {
              this.$Message.success(message);
              this.$refs[name].resetFields();
              this.$router.push({name: 'ArticleList'});
            } else {
              this.$Message.error(message);
            }
          }).catch((err) => {
            console.log(err);
          });
        }
      })
    }
  },
};
</script>
<style scoped>
  .login_page {
    text-align: center;
  }
</style>